<template>
  <div class="home_goods">
    <!-- 左侧给定固定的宽高,右侧直接flex:1 左侧better-scroll实现 滚动,而右侧岂不是也要新开一个better-scroll? 不管了, 船到桥头自然直吧-->
    <div class="menu" ref="goodMenu">
      <ul>
        <li
          class="border-bottom"
          v-for="(menu,index) in fatherCates"
          :key="index"
          @click="getSonData(menu.titleId)"
          :class="{'active':currentIndex==menu.titleId}"
        >
          <div class="item">
            <span class="icon"></span>
            {{menu.title}}
          </div>
        </li>
        <!--   <li class="border-bottom active">
          <div class="item">
            <span class="icon"></span>
            单人特色套餐
          </div>
        </li>-->
      </ul>
    </div>

    <div class="goods_list" ref="goodList">
      <ul class="good good_hook">
        <router-link
          tag="li"
          :to="'/categorylist/'+item.categoryId+'?catename='+item.category"
          class="cate_item"
          v-for="(item,idx) in sonCates"
          :key="idx"
        >
          <img src="/images/ic_kb.png">
          {{item.category}}
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'HomeGoods',
  data() {
    return {
      fatherCates: [],
      sonCates: [],
      ratingsData: [],
      sellerData: null,
      heightSet: [],
      scrollY: 0,
      menuScroll: null,
      foodsScroll: null,
      currentIndex: -1
    }
  },
  components: {
  },
  created() {
    this.getCategory()
  },
  mounted() { },
  methods: {
    getSonData(cid) {
      this.$api.home.getcategory(cid).then(({ status, data: info }) => {
        this.currentIndex = cid
        if (status === 200) {
          this.sonCates = info.result
          // 判断是否存在scroll,如果不存在就实例,如果存在,就直接refresh
          if (!this.foodsScroll) {
            this.foodsScroll = new Bscroll(this.$refs.goodList, {
              probeType: 3, // 希望scrooll在滚动的时候实时监听滚动到的位置
              click: true
            })
          } else {
            this.foodsScroll.refresh()
          }
        }
      })
    },
    // 点击切换样式,然后betterScroll跳转到列表指定的位置 --- 改版之后才能用,这里的后台数据有问题,暂时只能先如此
    toggleMenu(idx) {
      // 直接用BSroll点击切换过去就行 -- 现在不需要通过检测event._construct来判断是否是移动端了
      console.log(idx)
      const foodList = this.$refs.goodList.querySelectorAll('.good_hook')
      this.foodsScroll.scrollToElement(foodList[idx], 300)
    },
    // 右侧滚动触发左侧变化--- 计算每个分区的高度,然后判断手指当前在哪个区间,然后用BScroll跳转到左边指定位置
    calcListHeight() {
      const foodList = this.$refs.goodList.querySelectorAll('.good_hook')
      let height = 0
      // console.log(foodList.length);
      //  用数组将高度集合保存起来
      this.heightSet.push(height)
      for (let index = 0; index < foodList.length; index++) {
        const ele = foodList[index]
        height += ele.clientHeight
        this.heightSet.push(height)
      }
    },
    _initScroll() {
      this.menuScroll = new Bscroll(this.$refs.goodMenu, {
        click: true
      })
      this.foodsScroll = new Bscroll(this.$refs.goodList, {
        probeType: 3, // 希望scrooll在滚动的时候实时监听滚动到的位置
        click: true
      })
      this.foodsScroll.on('scroll', pos => {
        this.scrollY = Math.abs(Math.round(pos.y))
      })
      this.calcListHeight()
    },
    getCategory() {
      //  获取到左边的数据,然后点击获取到右侧的
      this.$api.home.getcategorytitle().then(({ status, data: info }) => {
        this.fatherCates = info.result
        // 再走一次请求,先展示下大家电的样式
        this.$api.home.getcategory(0).then(({ status, data: info }) => {
          this.currentIndex = 0
          if (status === 200) {
            this.sonCates = info.result
            // 再走一次请求,先展示下大家电的样式
            this.$nextTick(() => {
              // 初始化BScroll
              this._initScroll()
            })
          }
        })
      })
    }
  }

}
</script>

<style scoped lang="stylus">
.home_goods
  display flex
  overflow hidden
  border-top 1px solid #ececec
  .menu
    width 2rem
    li
      display table
      width 100%
      height 1.08rem
      line-height 1.08rem
      text-align center
      padding 0 0.24rem
      box-sizing border-box
      font 0.24rem / 0.56rem '微软雅黑'
      text-align center
      border-left 2px solid transparent
      border-right 1px solid #ececec
      &.active
        border-left 2px solid #41b883
        border-right none
      .item
        display table-cell
        vertical-align middle
        .icon
          display inline-block
          width 0.24rem
          height 0.24rem
          background-size cover
          background-repeat no-repeat
  .goods_list
    flex 1
    // 单独设置下右侧的布局
.good
  display flex
  flex-flow row wrap
  padding 0.2rem
  .cate_item
    flex 0 0 26%
    display flex
    flex-direction column
    align-items center
    margin 0.1rem
    img
      width 100%
</style>
